<script lang="ts">
  import { onMount } from 'svelte';
  import { Link } from 'svelte-routing';
  import { writable } from 'svelte/store';
  import { get } from '../../utils/api';
  import { addToast } from '../../stores/toastStore';
  import Header from '../../components/garage/Header.svelte';

  let loading = true; // 加载中
  let warehouseEntry = {
    entry_type: 1, // 入库类型
    entry_at: '2024-09-23 12:00:00', // 入库时间
    driver_name: '张三', // 送车人-姓名
    driver_phone: '17371086562', // 送车人-电话
    vehicle: {
      plate_number: '鄂AFG2129', // 车牌号
      chassis_number: 'LBGHG52H5F1234567', // 车架号
      type: 1, // 车辆类型
      model: 'SUV', // 车型
      key_present: 1, // 是否有钥匙
    },
    garage: {
      'title': '济宁库',
    }
  }
  async function getWarehouseEntry() {
    const query = new URLSearchParams(window.location.search);
    let id = query.get('id') || '0';

    try {
      const response = await get('/operation/warehouse-entries/'+id);
      warehouseEntry = response.data;
    } catch (error) {
      addToast('仓库数据加载失败'+error, 'error', 3000);
    }
  }

  onMount(() => {
    try {
      getWarehouseEntry();
    } catch (err) {
    } finally {
      loading = false;
    }
  });
</script>

<main>
  <Header title="入库报备" />
  <div class="flex flex-col items-center py-8">
    <div class="mt-8">
      <img src="https://via.placeholder.com/64?text=%E2%9C%94%EF%B8%8F" alt="success" class="h-16 w-16">
    </div>
    <div class="text-center mt-4">
      <p class="text-gray-600">提交成功，请按时送车到库</p>
    </div>

    <div class="bg-white shadow-md rounded-lg p-4 mt-8 w-11/12 max-w-md">
      <p><strong>库房名称：</strong>{warehouseEntry.garage.title}</p>
      <p><strong>车牌号码：</strong>{warehouseEntry.vehicle.plate_number}</p>
      <p><strong>车架号码：</strong>{warehouseEntry.vehicle.chassis_number}</p>
      <p><strong>车辆型号：</strong>{warehouseEntry.vehicle.model}</p>
      <p><strong>车辆钥匙：</strong>{warehouseEntry.vehicle.key_present === 1 ? '是' : '否'}</p>
      <p><strong>入库方式：</strong>{warehouseEntry.entry_type === 1 ? '普通入库' : '其它'}</p>
      <p><strong>送车人：</strong>{warehouseEntry.driver_name}</p>
      <p><strong>送车电话：</strong>{warehouseEntry.driver_phone}</p>
      <p><strong>送车时间：</strong>{warehouseEntry.entry_at}</p>
    </div>
    <div class="flex justify-around w-full mt-8">
      <Link to="/" class="bg-transparent text-gray-700 py-2 px-4 border border-gray-300 rounded-full">返回首页</Link>
      <Link to="/vihicle-details?id=1" class="bg-transparent text-gray-700 py-2 px-4 border border-gray-300 rounded-full">查看详情</Link>
    </div>
  </div>
</main>

<style lang="scss">
</style>